<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人物检测和碰撞</title>
    <link rel="stylesheet" href="/index.html">
</head>
<style>
    #kun {
        position: absolute;
        /* background-color: red; */
        width: 120px;
        height: 120px;
    }

    #kun>img {
        width: 100%;
        height: 100%;
    }

    .zhuankuai {
        width: 420px;
        height: 219px;
        position: absolute;
        left: 300px;
    }

    .zhuankuai>img {
        width: 100%;
    }
    #console{
        position: fixed;
        left:0;
        bottom: 0;
        z-index: 999;
    }
</style>

<body>
    <div id="kun">
        <img src="img/actor.gif" alt="">
    </div>
    <div class="zhuankuai">
        <img src="img/qiang.jpg" alt="">
    </div>
    <span id="console"></span>
</body>
<script src="js/game.js"></script>
<script>
    const el = document.getElementById("kun");
    const zk = document.getElementsByClassName("zhuankuai")[0];
    const log = document.getElementById("console");

    let zkLeft = zk.offsetLeft;
    let zkLeftMax = zkLeft + 420;
    let zkTop = zk.offsetTop;
    let zkTopMax = zkTop + 219;
    createActor("12321312", "move", {
        speed: 4
    }, (res) => {
        let isOverflowX = between(zkLeft, zkLeftMax + 120, res.x + 120);
        let isOverflowY = between(zkTop, zkTopMax + 120, res.y + 120);
        if(isOverflowX && isOverflowY){
            return;
        }else if(isOverflowY){
            
        }else if(isOverflowX){
            
        }
        el.style.top = res.y + "px";
        el.style.left = res.x + "px";
    });

    function between(min, max, val) {
        return (val > min) && (val < max);
    }

    function getStyle(el, prop) {
        return el.getBoundingClientRect()[prop];
    }

    createObject("1231", {
        collision: true
    });

</script>

</html>